<template>
    <div class="Preson">
      姓：<input type="text" v-model="firstName">
      名：<input type="text" v-model="lastName">
      <button @click="changfullName">更改为li-si</button>
      全名：<span>{{fullName}}</span>
    </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
let firstName = ref('张')
let lastName = ref('三')
// computed计算属性，它有缓存的
let fullName = computed({
    get() {
        return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    },
    set(val) {
        let [ str1, str2] = val.split('-')
        firstName.value = str1
        lastName.value = str2
    }
});
function changfullName() {
    fullName.value = 'li-si'
}

</script>

<style scoped>
.Preson {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
   
    display: flex;
    flex-direction: column;
}

button { 
    margin: 0 10px;
    width: 180px;
}
input{
    width: 180px;
}
</style>